<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var noRows = 100,
            noColumns = 1000,
            freezeCols = 1,
            freezeRows = 2,
            dataCache = new Array(noRows);

        for (var i = 0; i < noRows; i++) {
            dataCache[i] = new Array(noColumns);
            for (var j = 0; j < noColumns; j++) {
                dataCache[i][j] = "Row " + (i + 1) + ", Column " + (j + 1);
            }
        }

        var obj = {
            freezeRows: freezeRows,
            freezeCols: freezeCols,
            editable: true,
            flexWidth: false,
            //numberCell: { show: false },
            showBottom: false,
            virtualX: true,
            virtualY: true,            
            title: "<p style='text-align:center;'>Grid with <b>" + noColumns + "</b> Columns!!<p>",
            resizable: true
        };

        //create the colModel.
        var colModel = [];
        for (var i = 0; i < noColumns; i++) {
            var column = { title: "Column " + (i + 1), minWidth: 150, maxWidth: '25%' };
            colModel.push(column);
        }
        obj.colModel = colModel;
        /*obj.selectChange = function (evt, ui) {
            console.log('selectChange', evt,  ui);
        }*/
        //dataModel
        obj.dataModel = { data: dataCache };

        var $grid = $("#grid_infinite").pqGrid(obj);

    });
        
</script>    
</head>
<body>
ParamQuery Grid Pro is capable of displaying practically unlimited columns, thanks to virtual rendering for columns or x axis. 
In this example the grid displays thousand columns along with 2 rows and 1 column as frozen. 
<div id="grid_infinite" style="margin: auto;"></div>

</body>

</html>
